import 'package:flutter/material.dart';
import 'package:flutter_vant_ui/flutter_vant_ui.dart';

import '../../demos/demos.dart';

class VanDocDemoFieldSection extends StatelessWidget {
  const VanDocDemoFieldSection({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Field")),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.only(bottom: 40),
          child: Column(
            children: [
              const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20),
              Builder(builder: (context) {
                final value = ref("");
                return VanCellGroup(inset: true, children: [
                  VanField(ctrl: value, label: "文本", placeholder: "请输入用户名"),
                ]);
              }),
              //
              const VanDocDemoBlockTitle(title: "自定义类型", paddingTop: 20),
              Builder(builder: (context) {
                final tel = ref('');
                final text = ref('');
                final digit = ref('');
                final number = ref('');
                final password = ref('');

                return VanCellGroup(inset: true, children: [
                  /// 输入任意文本
                  VanField(ctrl: text, label: "文本"),
                  // 输入手机号，调起手机号键盘
                  VanField(ctrl: tel, type: VanFieldType.tel, label: "手机号"),
                  // 允许输入正整数，调起纯数字键盘
                  VanField(ctrl: digit, type: VanFieldType.digit, label: "整数"),
                  // 允许输入数字，调起带符号的纯数字键盘
                  VanField(ctrl: number, type: VanFieldType.number, label: "数字"),
                  // 输入密码
                  VanField(ctrl: password, type: VanFieldType.password, label: "密码"),
                ]);
              }),

              //
              const VanDocDemoBlockTitle(title: "禁用输入框", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(label: "文本", value: "输入框只读", readonly: true),
                VanField(label: "文本", value: "输入框已禁用", disabled: true),
              ]),
              //
              const VanDocDemoBlockTitle(title: "显示图标", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(label: "文本", placeholder: "显示图标", leftIcon: Icons.account_circle_outlined, rightIcon: Icons.info_outline),
                VanField(label: "文本", leftIcon: Icons.music_note_outlined, labelAlign: VanFieldLabelAlign.center),
              ]),
              //
              const VanDocDemoBlockTitle(title: "必填星号", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(label: "用户名", required: true),
                VanField(label: "手机号", value: "123", required: true),
              ]),
              //
              const VanDocDemoBlockTitle(title: "自动展示星号", paddingTop: 20),
              Builder(builder: (context) {
                return const VanCellGroup(inset: true, children: [
                  VanField(label: "用户名", rules: [
                    {"required": true}
                  ]),
                  VanField(label: "手机号", value: "123", rules: [
                    {"required": false}
                  ]),
                ]);
              }),
              //
              const VanDocDemoBlockTitle(title: "错误提示", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(label: "用户名", error: true, value: "斤斤计较"),
                VanField(label: "手机号", errorMessage: "手机号格式错误"),
              ]),
              //
              const VanDocDemoBlockTitle(title: "插入按钮", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(
                  label: "短信验证码",
                  placeholder: "请输入短信验证码",
                  center: true,
                  clearable: true,
                  clearTrigger: VanFieldClearTrigger.always,
                  button: VanButton(size: VanButtonSize.small, type: VanButtonType.primary, child: "发送验证码"),
                ),
              ]),
              //
              const VanDocDemoBlockTitle(title: "格式化输入内容", paddingTop: 20),
              Builder(builder: (context) {
                formatter(String value) => value.replaceAll(RegExp(r"\d+"), "");
                return VanCellGroup(inset: true, children: [
                  VanField(label: "文本", formatter: formatter, placeholder: "在输入时执行格式化"),
                  VanField(label: "文本", formatter: formatter, formatTrigger: VanFieldFormatTrigger.onBlur, placeholder: "在失焦时执行格式化"),
                ]);
              }),
              //
              const VanDocDemoBlockTitle(title: "高度自适应", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(type: VanFieldType.textarea, autosize: true, label: "留言", rows: 1),
              ]),
              //
              const VanDocDemoBlockTitle(title: "显示字数统计", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(type: VanFieldType.textarea, autosize: true, label: "留言", maxLength: 50, showWordLimit: true),
              ]),
              //
              const VanDocDemoBlockTitle(title: "输入框内容对齐", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(label: "文本", placeholder: "输入框内容右对齐", inputAlign: VanFieldInputAlign.right),
              ]),
              //
              const VanDocDemoBlockTitle(title: "输入框文本位置", paddingTop: 20),
              const VanCellGroup(inset: true, children: [
                VanField(label: "文本", placeholder: "顶部对齐", labelAlign: VanFieldLabelAlign.top),
                VanField(label: "文本", placeholder: "左对齐", labelAlign: VanFieldLabelAlign.left),
                VanField(label: "文本", placeholder: "居中对齐", labelAlign: VanFieldLabelAlign.center),
                VanField(label: "文本", placeholder: "右对齐", labelAlign: VanFieldLabelAlign.right),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}
